<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>18_弹性盒子-案例练习</title>
        <style>
            a {
                text-decoration: none;
                color: #333;
            }

            /* 给row设置为伸缩容器 然后里面所有伸缩项目 就可以横起来 */
            .row {
                display: flex;
            }

            .col {
                flex:1;
            }

            /* 让文字和图片在一列中  那么此时我们可以修改主轴的方向为Y轴flex-direction: column;
               如果你想修改主轴方向 就需要将这个盒子变成伸缩容器display: flex;
                align-items: center; 居中
               */
            .col a {
                display: flex;

                flex-direction: column;

                align-items: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <!-- 第一行 -->
            <div class="row">
                <div class="col">
                    <a href="#">
                        <img src="./images-pic/01天猫.png" alt="">
                        <span>天猫</span>
                    </a>
                </div>

                <div class="col">
                    <a href="#">
                        <img src="./images-pic/02聚划算.png" alt="">
                        <span>聚划算</span>
                    </a>
                </div>

                <div class="col">
                    <a href="#">
                        <img src="./images-pic/03天猫国际.png" alt="">
                        <span>天猫国际</span>
                    </a>
                </div>

                <div class="col">
                    <a href="#">
                        <img src="./images-pic/04外卖.png" alt="">
                        <span>外卖</span>
                    </a>
                </div>

                <div class="col">
                    <a href="#">
                        <img src="./images-pic/05天猫超市.png" alt="">
                        <span>天猫</span>
                    </a>
                </div>

            </div>

            <div class="row">
                <div class="col">
                    <a href="#">
                        <img src="./images-pic/01天猫.png" alt="">
                        <span>天猫</span>
                    </a>
                </div>

                <div class="col">
                    <a href="#">
                        <img src="./images-pic/02聚划算.png" alt="">
                        <span>聚划算</span>
                    </a>
                </div>

                <div class="col">
                    <a href="#">
                        <img src="./images-pic/03天猫国际.png" alt="">
                        <span>天猫国际</span>
                    </a>
                </div>

                <div class="col">
                    <a href="#">
                        <img src="./images-pic/04外卖.png" alt="">
                        <span>外卖</span>
                    </a>
                </div>

                <div class="col">
                    <a href="#">
                        <img src="./images-pic/05天猫超市.png" alt="">
                        <span>天猫</span>
                    </a>
                </div>

            </div>
        </div>
    </body>
</html>